li{
    list-style: none;
}
.clock-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #eceef0;
    overflow: hidden;
}
.clock-border{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 460px;
    height: 460px;
    border-width: 18px;
    border-color: transparent #d2d8df #d2d8df;
    border-style: solid;
    border-radius: 50%;
    background-clip: padding-box;
    transform: rotate(45deg);
    -webkit-animation: rotate-clock-border 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1 forwards;
}
@-webkit-keyframes rotate-clock-border{ 
    0%{ -webkit-transform: rotate( 45deg); } 
    100%{ -webkit-transform: rotate( 315deg); }
}
.clock{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 400px;
    height: 400px;
    padding: 0;
    background-color: #262c33;
    border: 18px solid #373f4a;
    border-radius: 50%;
    background-clip: padding-box;
    transform:rotate(-45deg);
    -webkit-animation:rotate-clock 0.69s cubic-bezier(0.645,0,0.605,1) 0.69s 1 forwards;
}
@-webkit-keyframes rotate-clock{
    0%{-webkit-transform:rotate(-45deg);}
    100%{-webkit-transform:rotate(-315deg);}
}
.minute-marks{
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 0px;
    height: 0px;
    list-style-type: none;
}
.minute-marks li{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: inline-block;
    width: 200px;
    height: 200px;
}
.minute-marks li:before,.minute-marks li:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 0;
    width: 0;
    display: inline-block;
    border-color:#d4d5d6;
    border-width: 4px;
    border-style: solid;
    border-radius: 4px;
    background-clip: padding-box;
    opacity: 0;
    -webkit-animation:fade-in 0.1s ease 0s 1 forwards;
}
@-webkit-keyframes fade-in{
    from{opacity: 0;}
    to{opacity: 1;}
}
.minute-marks li:before{
    top: -380px;
}
.minute-marks li:after{
    bottom: -380px;
}
.minute-marks li.five:before,.minute-marks li.five:after{
    width: 0px;
    height: 20px;
}
.minute-marks li.five:before{
    top: -360px;
}
.minute-marks li.five:after{
    bottom: -360px;
}
.minute-marks li:nth-child(1) {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}
.minute-marks li:nth-child(1):before {
    -webkit-animation-delay: 0.017s;
    -moz-animation-delay: 0.017s;
    -o-animation-delay: 0.017s;
    animation-delay: 0.017s;
}
.minute-marks li:nth-child(1):after {
    -webkit-animation-delay: 0.544s;
    -moz-animation-delay: 0.544s;
    -o-animation-delay: 0.544s;
    animation-delay: 0.544s;
}
.minute-marks li:nth-child(2) {
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    transform: rotate(6deg);
}
.minute-marks li:nth-child(2):before {
    -webkit-animation-delay: 0.034s;
    -moz-animation-delay: 0.034s;
    -o-animation-delay: 0.034s;
    animation-delay: 0.034s;
}
.minute-marks li:nth-child(2):after {
    -webkit-animation-delay: 0.561s;
    -moz-animation-delay: 0.561s;
    -o-animation-delay: 0.561s;
    animation-delay: 0.561s;
}
.minute-marks li:nth-child(3) {
    -webkit-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
    -o-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    transform: rotate(12deg);
}
.minute-marks li:nth-child(3):before {
    -webkit-animation-delay: 0.051000000000000004s;
    -moz-animation-delay: 0.051000000000000004s;
    -o-animation-delay: 0.051000000000000004s;
    animation-delay: 0.051000000000000004s;
}
.minute-marks li:nth-child(3):after {
    -webkit-animation-delay: 0.5780000000000001s;
    -moz-animation-delay: 0.5780000000000001s;
    -o-animation-delay: 0.5780000000000001s;
    animation-delay: 0.5780000000000001s;
}
.minute-marks li:nth-child(4) {
    -webkit-transform: rotate(18deg);
    -moz-transform: rotate(18deg);
    -o-transform: rotate(18deg);
    -ms-transform: rotate(18deg);
    transform: rotate(18deg);
}
.minute-marks li:nth-child(4):before {
    -webkit-animation-delay: 0.068s;
    -moz-animation-delay: 0.068s;
    -o-animation-delay: 0.068s;
    animation-delay: 0.068s;
}
.minute-marks li:nth-child(4):after {
    -webkit-animation-delay: 0.595s;
    -moz-animation-delay: 0.595s;
    -o-animation-delay: 0.595s;
    animation-delay: 0.595s;
}
.minute-marks li:nth-child(5) {
    -webkit-transform: rotate(24deg);
    -moz-transform: rotate(24deg);
    -o-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg);
}
.minute-marks li:nth-child(5):before {
    -webkit-animation-delay: 0.085s;
    -moz-animation-delay: 0.085s;
    -o-animation-delay: 0.085s;
    animation-delay: 0.085s;
}
.minute-marks li:nth-child(5):after {
    -webkit-animation-delay: 0.612s;
    -moz-animation-delay: 0.612s;
    -o-animation-delay: 0.612s;
    animation-delay: 0.612s;
}
.minute-marks li:nth-child(6) {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}
.minute-marks li:nth-child(6):before {
    -webkit-animation-delay: 0.10200000000000001s;
    -moz-animation-delay: 0.10200000000000001s;
    -o-animation-delay: 0.10200000000000001s;
    animation-delay: 0.10200000000000001s;
}
.minute-marks li:nth-child(6):after {
    -webkit-animation-delay: 0.629s;
    -moz-animation-delay: 0.629s;
    -o-animation-delay: 0.629s;
    animation-delay: 0.629s;
}
.minute-marks li:nth-child(7) {
    -webkit-transform: rotate(36deg);
    -moz-transform: rotate(36deg);
    -o-transform: rotate(36deg);
    -ms-transform: rotate(36deg);
    transform: rotate(36deg);
}
.minute-marks li:nth-child(7):before {
    -webkit-animation-delay: 0.11900000000000001s;
    -moz-animation-delay: 0.11900000000000001s;
    -o-animation-delay: 0.11900000000000001s;
    animation-delay: 0.11900000000000001s;
}
.minute-marks li:nth-child(7):after {
    -webkit-animation-delay: 0.646s;
    -moz-animation-delay: 0.646s;
    -o-animation-delay: 0.646s;
    animation-delay: 0.646s;
}
.minute-marks li:nth-child(8) {
    -webkit-transform: rotate(42deg);
    -moz-transform: rotate(42deg);
    -o-transform: rotate(42deg);
    -ms-transform: rotate(42deg);
    transform: rotate(42deg);
}
.minute-marks li:nth-child(8):before {
    -webkit-animation-delay: 0.136s;
    -moz-animation-delay: 0.136s;
    -o-animation-delay: 0.136s;
    animation-delay: 0.136s;
}
.minute-marks li:nth-child(8):after {
    -webkit-animation-delay: 0.663s;
    -moz-animation-delay: 0.663s;
    -o-animation-delay: 0.663s;
    animation-delay: 0.663s;
}
.minute-marks li:nth-child(9) {
    -webkit-transform: rotate(48deg);
    -moz-transform: rotate(48deg);
    -o-transform: rotate(48deg);
    -ms-transform: rotate(48deg);
    transform: rotate(48deg);
}
.minute-marks li:nth-child(9):before {
    -webkit-animation-delay: 0.15300000000000002s;
    -moz-animation-delay: 0.15300000000000002s;
    -o-animation-delay: 0.15300000000000002s;
    animation-delay: 0.15300000000000002s;
}
.minute-marks li:nth-child(9):after {
    -webkit-animation-delay: 0.68s;
    -moz-animation-delay: 0.68s;
    -o-animation-delay: 0.68s;
    animation-delay: 0.68s;
}
.minute-marks li:nth-child(10) {
    -webkit-transform: rotate(54deg);
    -moz-transform: rotate(54deg);
    -o-transform: rotate(54deg);
    -ms-transform: rotate(54deg);
    transform: rotate(54deg);
}
.minute-marks li:nth-child(10):before {
    -webkit-animation-delay: 0.17s;
    -moz-animation-delay: 0.17s;
    -o-animation-delay: 0.17s;
    animation-delay: 0.17s;
}
.minute-marks li:nth-child(10):after {
    -webkit-animation-delay: 0.6970000000000001s;
    -moz-animation-delay: 0.6970000000000001s;
    -o-animation-delay: 0.6970000000000001s;
    animation-delay: 0.6970000000000001s;
}
.minute-marks li:nth-child(11) {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}
.minute-marks li:nth-child(11):before {
    -webkit-animation-delay: 0.187s;
    -moz-animation-delay: 0.187s;
    -o-animation-delay: 0.187s;
    animation-delay: 0.187s;
}
.minute-marks li:nth-child(11):after {
    -webkit-animation-delay: 0.714s;
    -moz-animation-delay: 0.714s;
    -o-animation-delay: 0.714s;
    animation-delay: 0.714s;
}
.minute-marks li:nth-child(12) {
    -webkit-transform: rotate(66deg);
    -moz-transform: rotate(66deg);
    -o-transform: rotate(66deg);
    -ms-transform: rotate(66deg);
    transform: rotate(66deg);
}
.minute-marks li:nth-child(12):before {
    -webkit-animation-delay: 0.20400000000000001s;
    -moz-animation-delay: 0.20400000000000001s;
    -o-animation-delay: 0.20400000000000001s;
    animation-delay: 0.20400000000000001s;
}
.minute-marks li:nth-child(12):after {
    -webkit-animation-delay: 0.7310000000000001s;
    -moz-animation-delay: 0.7310000000000001s;
    -o-animation-delay: 0.7310000000000001s;
    animation-delay: 0.7310000000000001s;
}
.minute-marks li:nth-child(13) {
    -webkit-transform: rotate(72deg);
    -moz-transform: rotate(72deg);
    -o-transform: rotate(72deg);
    -ms-transform: rotate(72deg);
    transform: rotate(72deg);
}
.minute-marks li:nth-child(13):before {
    -webkit-animation-delay: 0.22100000000000003s;
    -moz-animation-delay: 0.22100000000000003s;
    -o-animation-delay: 0.22100000000000003s;
    animation-delay: 0.22100000000000003s;
}
.minute-marks li:nth-child(13):after {
    -webkit-animation-delay: 0.748s;
    -moz-animation-delay: 0.748s;
    -o-animation-delay: 0.748s;
    animation-delay: 0.748s;
}
.minute-marks li:nth-child(14) {
    -webkit-transform: rotate(78deg);
    -moz-transform: rotate(78deg);
    -o-transform: rotate(78deg);
    -ms-transform: rotate(78deg);
    transform: rotate(78deg);
}
.minute-marks li:nth-child(14):before {
    -webkit-animation-delay: 0.23800000000000002s;
    -moz-animation-delay: 0.23800000000000002s;
    -o-animation-delay: 0.23800000000000002s;
    animation-delay: 0.23800000000000002s;
}
.minute-marks li:nth-child(14):after {
    -webkit-animation-delay: 0.765s;
    -moz-animation-delay: 0.765s;
    -o-animation-delay: 0.765s;
    animation-delay: 0.765s;
}
.minute-marks li:nth-child(15) {
    -webkit-transform: rotate(84deg);
    -moz-transform: rotate(84deg);
    -o-transform: rotate(84deg);
    -ms-transform: rotate(84deg);
    transform: rotate(84deg);
}
.minute-marks li:nth-child(15):before {
    -webkit-animation-delay: 0.255s;
    -moz-animation-delay: 0.255s;
    -o-animation-delay: 0.255s;
    animation-delay: 0.255s;
}
.minute-marks li:nth-child(15):after {
    -webkit-animation-delay: 0.782s;
    -moz-animation-delay: 0.782s;
    -o-animation-delay: 0.782s;
    animation-delay: 0.782s;
}
.minute-marks li:nth-child(16) {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.minute-marks li:nth-child(16):before {
    -webkit-animation-delay: 0.272s;
    -moz-animation-delay: 0.272s;
    -o-animation-delay: 0.272s;
    animation-delay: 0.272s;
}
.minute-marks li:nth-child(16):after {
    -webkit-animation-delay: 0.799s;
    -moz-animation-delay: 0.799s;
    -o-animation-delay: 0.799s;
    animation-delay: 0.799s;
}
.minute-marks li:nth-child(17) {
    -webkit-transform: rotate(96deg);
    -moz-transform: rotate(96deg);
    -o-transform: rotate(96deg);
    -ms-transform: rotate(96deg);
    transform: rotate(96deg);
}
.minute-marks li:nth-child(17):before {
    -webkit-animation-delay: 0.28900000000000003s;
    -moz-animation-delay: 0.28900000000000003s;
    -o-animation-delay: 0.28900000000000003s;
    animation-delay: 0.28900000000000003s;
}
.minute-marks li:nth-child(17):after {
    -webkit-animation-delay: 0.8160000000000001s;
    -moz-animation-delay: 0.8160000000000001s;
    -o-animation-delay: 0.8160000000000001s;
    animation-delay: 0.8160000000000001s;
}
.minute-marks li:nth-child(18) {
    -webkit-transform: rotate(102deg);
    -moz-transform: rotate(102deg);
    -o-transform: rotate(102deg);
    -ms-transform: rotate(102deg);
    transform: rotate(102deg);
}
.minute-marks li:nth-child(18):before {
    -webkit-animation-delay: 0.30600000000000005s;
    -moz-animation-delay: 0.30600000000000005s;
    -o-animation-delay: 0.30600000000000005s;
    animation-delay: 0.30600000000000005s;
}
.minute-marks li:nth-child(18):after {
    -webkit-animation-delay: 0.8330000000000001s;
    -moz-animation-delay: 0.8330000000000001s;
    -o-animation-delay: 0.8330000000000001s;
    animation-delay: 0.8330000000000001s;
}
.minute-marks li:nth-child(19) {
    -webkit-transform: rotate(108deg);
    -moz-transform: rotate(108deg);
    -o-transform: rotate(108deg);
    -ms-transform: rotate(108deg);
    transform: rotate(108deg);
}
.minute-marks li:nth-child(19):before {
    -webkit-animation-delay: 0.323s;
    -moz-animation-delay: 0.323s;
    -o-animation-delay: 0.323s;
    animation-delay: 0.323s;
}
.minute-marks li:nth-child(19):after {
    -webkit-animation-delay: 0.8500000000000001s;
    -moz-animation-delay: 0.8500000000000001s;
    -o-animation-delay: 0.8500000000000001s;
    animation-delay: 0.8500000000000001s;
}
.minute-marks li:nth-child(20) {
    -webkit-transform: rotate(114deg);
    -moz-transform: rotate(114deg);
    -o-transform: rotate(114deg);
    -ms-transform: rotate(114deg);
    transform: rotate(114deg);
}
.minute-marks li:nth-child(20):before {
    -webkit-animation-delay: 0.34s;
    -moz-animation-delay: 0.34s;
    -o-animation-delay: 0.34s;
    animation-delay: 0.34s;
}
.minute-marks li:nth-child(20):after {
    -webkit-animation-delay: 0.867s;
    -moz-animation-delay: 0.867s;
    -o-animation-delay: 0.867s;
    animation-delay: 0.867s;
}
.minute-marks li:nth-child(21) {
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}
.minute-marks li:nth-child(21):before {
    -webkit-animation-delay: 0.35700000000000004s;
    -moz-animation-delay: 0.35700000000000004s;
    -o-animation-delay: 0.35700000000000004s;
    animation-delay: 0.35700000000000004s;
}
.minute-marks li:nth-child(21):after {
    -webkit-animation-delay: 0.8840000000000001s;
    -moz-animation-delay: 0.8840000000000001s;
    -o-animation-delay: 0.8840000000000001s;
    animation-delay: 0.8840000000000001s;
}
.minute-marks li:nth-child(22) {
    -webkit-transform: rotate(126deg);
    -moz-transform: rotate(126deg);
    -o-transform: rotate(126deg);
    -ms-transform: rotate(126deg);
    transform: rotate(126deg);
}
.minute-marks li:nth-child(22):before {
    -webkit-animation-delay: 0.374s;
    -moz-animation-delay: 0.374s;
    -o-animation-delay: 0.374s;
    animation-delay: 0.374s;
}
.minute-marks li:nth-child(22):after {
    -webkit-animation-delay: 0.901s;
    -moz-animation-delay: 0.901s;
    -o-animation-delay: 0.901s;
    animation-delay: 0.901s;
}
.minute-marks li:nth-child(23) {
    -webkit-transform: rotate(132deg);
    -moz-transform: rotate(132deg);
    -o-transform: rotate(132deg);
    -ms-transform: rotate(132deg);
    transform: rotate(132deg);
}
.minute-marks li:nth-child(23):before {
    -webkit-animation-delay: 0.391s;
    -moz-animation-delay: 0.391s;
    -o-animation-delay: 0.391s;
    animation-delay: 0.391s;
}
.minute-marks li:nth-child(23):after {
    -webkit-animation-delay: 0.918s;
    -moz-animation-delay: 0.918s;
    -o-animation-delay: 0.918s;
    animation-delay: 0.918s;
}
.minute-marks li:nth-child(24) {
    -webkit-transform: rotate(138deg);
    -moz-transform: rotate(138deg);
    -o-transform: rotate(138deg);
    -ms-transform: rotate(138deg);
    transform: rotate(138deg);
}
.minute-marks li:nth-child(24):before {
    -webkit-animation-delay: 0.40800000000000003s;
    -moz-animation-delay: 0.40800000000000003s;
    -o-animation-delay: 0.40800000000000003s;
    animation-delay: 0.40800000000000003s;
}
.minute-marks li:nth-child(24):after {
    -webkit-animation-delay: 0.935s;
    -moz-animation-delay: 0.935s;
    -o-animation-delay: 0.935s;
    animation-delay: 0.935s;
}
.minute-marks li:nth-child(25) {
    -webkit-transform: rotate(144deg);
    -moz-transform: rotate(144deg);
    -o-transform: rotate(144deg);
    -ms-transform: rotate(144deg);
    transform: rotate(144deg);
}
.minute-marks li:nth-child(25):before {
    -webkit-animation-delay: 0.42500000000000004s;
    -moz-animation-delay: 0.42500000000000004s;
    -o-animation-delay: 0.42500000000000004s;
    animation-delay: 0.42500000000000004s;
}
.minute-marks li:nth-child(25):after {
    -webkit-animation-delay: 0.9520000000000001s;
    -moz-animation-delay: 0.9520000000000001s;
    -o-animation-delay: 0.9520000000000001s;
    animation-delay: 0.9520000000000001s;
}
.minute-marks li:nth-child(26) {
    -webkit-transform: rotate(150deg);
    -moz-transform: rotate(150deg);
    -o-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg);
}
.minute-marks li:nth-child(26):before {
    -webkit-animation-delay: 0.44200000000000006s;
    -moz-animation-delay: 0.44200000000000006s;
    -o-animation-delay: 0.44200000000000006s;
    animation-delay: 0.44200000000000006s;
}
.minute-marks li:nth-child(26):after {
    -webkit-animation-delay: 0.9690000000000001s;
    -moz-animation-delay: 0.9690000000000001s;
    -o-animation-delay: 0.9690000000000001s;
    animation-delay: 0.9690000000000001s;
}
.minute-marks li:nth-child(27) {
    -webkit-transform: rotate(156deg);
    -moz-transform: rotate(156deg);
    -o-transform: rotate(156deg);
    -ms-transform: rotate(156deg);
    transform: rotate(156deg);
}
.minute-marks li:nth-child(27):before {
    -webkit-animation-delay: 0.459s;
    -moz-animation-delay: 0.459s;
    -o-animation-delay: 0.459s;
    animation-delay: 0.459s;
}
.minute-marks li:nth-child(27):after {
    -webkit-animation-delay: 0.986s;
    -moz-animation-delay: 0.986s;
    -o-animation-delay: 0.986s;
    animation-delay: 0.986s;
}
.minute-marks li:nth-child(28) {
    -webkit-transform: rotate(162deg);
    -moz-transform: rotate(162deg);
    -o-transform: rotate(162deg);
    -ms-transform: rotate(162deg);
    transform: rotate(162deg);
}
.minute-marks li:nth-child(28):before {
    -webkit-animation-delay: 0.47600000000000003s;
    -moz-animation-delay: 0.47600000000000003s;
    -o-animation-delay: 0.47600000000000003s;
    animation-delay: 0.47600000000000003s;
}
.minute-marks li:nth-child(28):after {
    -webkit-animation-delay: 1.0030000000000001s;
    -moz-animation-delay: 1.0030000000000001s;
    -o-animation-delay: 1.0030000000000001s;
    animation-delay: 1.0030000000000001s;
}
.minute-marks li:nth-child(29) {
    -webkit-transform: rotate(168deg);
    -moz-transform: rotate(168deg);
    -o-transform: rotate(168deg);
    -ms-transform: rotate(168deg);
    transform: rotate(168deg);
}
.minute-marks li:nth-child(29):before {
    -webkit-animation-delay: 0.49300000000000005s;
    -moz-animation-delay: 0.49300000000000005s;
    -o-animation-delay: 0.49300000000000005s;
    animation-delay: 0.49300000000000005s;
}
.minute-marks li:nth-child(29):after {
    -webkit-animation-delay: 1.02s;
    -moz-animation-delay: 1.02s;
    -o-animation-delay: 1.02s;
    animation-delay: 1.02s;
}
.minute-marks li:nth-child(30) {
    -webkit-transform: rotate(174deg);
    -moz-transform: rotate(174deg);
    -o-transform: rotate(174deg);
    -ms-transform: rotate(174deg);
    transform: rotate(174deg);
}
.minute-marks li:nth-child(30):before {
    -webkit-animation-delay: 0.51s;
    -moz-animation-delay: 0.51s;
    -o-animation-delay: 0.51s;
    animation-delay: 0.51s;
}
.minute-marks li:nth-child(30):after {
    -webkit-animation-delay: 1.037s;
    -moz-animation-delay: 1.037s;
    -o-animation-delay: 1.037s;
    animation-delay: 1.037s;
}

.hour{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    transform:rotate(90deg);
}
.hour .hand{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-animation:tick 43200s normal infinite steps(43200,end) 3s;
}
.hour .hand:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    display: inline-block;
    height: 0px;
    width: 16px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    background-clip: padding-box;
    transform-origin:center 100%;
    background-color: #fff;
}
.hour .hand:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    display: inline-block;
    border-bottom: 16px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    width: 0;
    height: 0;
    transform-origin:center 100%;
}
.hour .hand:before{
    -webkit-animation:hour-grow-before 0.4s cubic-bezier(0.69,0,0.49,1) 1.35s 1 forwards;
}
@-webkit-keyframes hour-grow-before{
    0%{height: 0;top: 0;}
    100%{height: 120px;top:-120px;}
}
.hour .hand:after{
    -webkit-animation:hour-grow-after 0.4s cubic-bezier(0.69,0,0.49,1) 1.35s 1 forwards;
}
@-webkit-keyframes hour-grow-after{
    0%{top: 0;}
    100%{top: -254px}
}
.minute{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    transform:rotate(180deg);
}
.minute .hand{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-animation:tick-minute 3600s normal infinite steps(3600,end) 3s;
}
.minute .hand:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    display: inline-block;
    height: 0px;
    width: 14px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    background-clip: padding-box;
    transform-origin:center 100%;
    background-color: #fff;
}
.minute .hand:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    display: inline-block;
    border-bottom: 14px solid #fff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    width: 0;
    height: 0;
    transform-origin:center 100%;
}
.minute .hand:before{
    -webkit-animation:minute-grow-before 0.4s cubic-bezier(0.69,0,0.49,1) 1.6s 1 forwards;
}
@-webkit-keyframes minute-grow-before{
    0%{height: 0;top: 0;}
    100%{height: 160px;top:-160px;}
}
.minute .hand:after{
    -webkit-animation:minute-grow-after 0.4s cubic-bezier(0.69,0,0.49,1) 1.6s 1 forwards;
}
@-webkit-keyframes minute-grow-after{
    0%{top: 0;}
    100%{top: -331px}
}
.second{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    background-color: #f16b41;
    border-radius: 50%;
}
.second .hand{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    display: inline-block;
    -webkit-animation:second 60s normal infinite steps(60,end) 3s;
}
.second .hand:before{
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    top: 0px;
    bottom: 0;
    margin: auto;
    width: 10px;
    height: 0px;
    display: inline-block;
    background-color: #f16b41;
    border-radius: 5px;
    transform:rotate(30deg);
    transform-origin:center 16%;
    -webkit-animation:second-grow-before 1.6s cubic-bezier(1,0,0,1) 1.45s 1 forwards,tick-second 1s normal infinite steps(30, end) 3s;

}
@-webkit-keyframes second-grow-before{
    0%{top:0;height:0;}
    100%{top: 150px;height: 220px}
}
@-webkit-keyframes tick-minute{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
@-webkit-keyframes tick{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
@-webkit-keyframes second{
    0%{transform:rotate(30deg);}
    100%{transform:rotate(390deg);}
}
@-webkit-keyframes tick-second{ 
    0%{ -webkit-transform: rotate(0deg); } 
    21%{ -webkit-transform: rotate(4deg); } 
    26%{ -webkit-transform: rotate(8deg); } 
    33%{ -webkit-transform: rotate(4deg); } 
    37%{ -webkit-transform: rotate(6deg); } 
    100%{ -webkit-transform: rotate(6deg); }
}